import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'



export default class ProductLi extends Component{

    componentWillMount () { }

    componentDidMount () { }
  
    componentWillUnmount () { }
  
    componentDidShow () { }
  
    componentDidHide () { }
    
    config: Config = {}

    contactTips(tips){
        let tipsStr = '';
        
        for(let i = 0, l = tips.length; i < l; i++){
            tipsStr = `${tipsStr} ${tips[i]}`
        }

        return tipsStr;
    }

    render(){

        if(!this.props){
            return ''
        }

        let {
        
            name,
            price,
            tips,
            amount
            
        } = this.props.product || this.defaultProps;
        
        
        return (

            <View className="product-li">

                <View className="li-header">
                    <Text className="name">
                        {name}
                    </Text>
                    <Text className="price">
                        ￥{price}
                    </Text>
                </View>

                <View className="li-sub">
                    <Text className="tips">
                        {this.contactTips(tips)}
                    </Text>
                    <Text className="amount">
                        x{amount}
                    </Text>
                </View>
                
            </View>
            
        )
        
    }
    
}

ProductLi.defaultProps  = {

    product: {
        name: '',
        price: 0,
        tips: [],
        amount: 0
    }
    
} 